<template>
  <a-space class="pull-right">
    <a-button type="primary" @click="search">查 询</a-button>
    <a-button @click="reset">重 置</a-button>
    <a-button
      type="link"
      v-if="showToggle"
      style="padding: 0 5px"
      @click="toggleSearchItem"
    >
      {{ state.open ? "收起" : "展开" }}
      <UpOutlined v-if="state.open" />
      <DownOutlined v-else />
    </a-button>
  </a-space>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
// icon
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";

/**
 * props
 */
const props = defineProps({
  show: Boolean,
  showToggle: Boolean,
});
/**
 * emit
 */
const emit = defineEmits(["update:show", "search", "reset", "toggle"]);
/**
 * state
 */
const state = reactive({
  open: false,
});

const toggleSearchItem = () => {
  state.open = !state.open;
  emit("update:show", state.open);
  emit("toggle");
};
const search = () => {
  emit("search");
};
const reset = () => {
  emit("reset");
};
</script>
<style lang="scss"></style>
